<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="30%"
  >
    <el-form
      :model="baseattr"
      :rules="rules"
      ref="baseattr"
      label-width="100px"
    >
      <el-form-item
        label="属性名称"
        prop="attrName"
      >
        <el-input
          v-model="baseattr.attrName"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="是否检索">
        <el-switch
          v-model="baseattr.searchType"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="启用状态">
        <el-switch
          v-model="baseattr.enable"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item label="快速展示">
        <el-switch
          v-model="baseattr.showDesc"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item
        label="属性图标"
        prop="icon"
      >
        <el-input
          v-model="baseattr.icon"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="可选值">
        <el-input
          v-model="baseattr.valueSelect"
          autocomplete="off"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="属性类型"
        prop="attrType"
      >
        <el-select
          v-model="baseattr.attrType"
          placeholder="请选择活动区域"
          style="width: 80%"
        >
          <el-option
            label="销售属性"
            :value="0"
          ></el-option>
          <el-option
            label="基本属性"
            :value="1"
          ></el-option>
          <el-option
            label="销售&基本"
            :value="2"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属分类">
        <el-cascader
          v-model="value"
          :options="options"
          :props="catCascade"
          placeholder="试试搜索：手机"
          filterable
          style="width: 80%"
        >
        </el-cascader>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="visible = false">取消</el-button>
      <el-button
        type="primary"
        @click="dataFormSubmit('baseattr')"
      >确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      title: '',
      dialogType: '',
      row: '',
      baseattr: {
        attrName: '',
        searchType: 1,
        enable: 1,
        showDesc: 1,
        icon: '',
        valueSelect: '',
        attrType: '',
        catelogId: '',
        showStatus: 1
      },
      rules: { // 校验规则
        attrName: [{
          required: true,
          message: '请输入属性名称',
          trigger: 'blur'
        },
        {
          min: 1,
          max: 5,
          message: '长度在 1 到 5 个字符',
          trigger: 'blur'
        }
        ],
        attrType: [{
          required: true,
          message: '请输入属性类型',
          trigger: 'blur'
        }]
      },
      value: [],
      options: [],
      catCascade: { // 级联属性分配
        expandTrigger: 'hover',
        value: 'catId',
        label: 'name',
        children: 'children'
      }
    }
  },
  methods: {
    init (index, row) {
      this.visible = true
      if (Number.isNaN(parseInt(index))) {
        this.title = '添加属性'
        this.dialogType = 'add'
        this.addEchoBaseattr()
      } else {
        this.title = '修改属性'
        this.dialogType = 'edit'
        this.row = row
        this.editEchoBaseattr(this.row)
      }
    },
    addEchoBaseattr () {
      this.baseattr.attrId = ''
      this.baseattr.attrName = ''
      this.baseattr.attrType = ''
      this.baseattr.enable = 1
      this.baseattr.searchType = 1
      this.baseattr.showDesc = 1
      this.baseattr.valueSelect = ''
      this.baseattr.icon = ''
      this.value = []
    },
    editEchoBaseattr (row) {
      this.$http({
        url: this.$http.adornUrl(`/product/attr/info/${row.attrId}`),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({
        data
      }) => {
        // 回显
        this.baseattr.attrId = data.data.attrId
        this.baseattr.attrName = data.data.attrName
        this.baseattr.attrType = data.data.attrType
        this.baseattr.enable = data.data.enable
        this.baseattr.searchType = data.data.searchType
        this.baseattr.showDesc = data.data.showDesc
        this.baseattr.valueSelect = data.data.valueSelect
        this.baseattr.icon = data.data.icon
        this.value = data.data.valuePath
      })
    },
    addBaseattr () {
      this.baseattr.catelogId = this.value[this.value.length - 1]
      this.$http({
        url: this.$http.adornUrl('/product/attr/save'),
        method: 'post',
        data: this.$http.adornData(this.baseattr, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '组保存成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },
    editBaseattr () {
      this.$http({
        url: this.$http.adornUrl('/product/attr/update'),
        method: 'post',
        data: this.$http.adornData(this.baseattr, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '组修改成功!'
        })
        this.visible = false // 关闭对话框
        this.$emit('refreshDataList') // 刷新数据
      })
    },
    dataFormSubmit (baseattr) {
      this.$refs[baseattr].validate((valid) => {
        if (valid) {
          if (this.dialogType === 'add') {
            this.addBaseattr()
          } else {
            this.editBaseattr()
          }
        } else {
          return false
        }
      })
    },
    getCategoryOptions () {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        method: 'get'
        // params: this.$http.adornParams({

        // })
      }).then(({ data }) => {
        this.options = data.data
      })
    }
  },
  created () {
    this.getCategoryOptions()
  }
}
</script>